/*

https://www.w3school.com.cn/xmldom/dom_http.asp
https://www.w3school.com.cn/xml/xml_parser.asp

XMLHttpRequest {readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, onreadystatechange: ƒ, …}
onabort: null
onerror: null
onload: null
onloadend: null
onloadstart: null
onprogress: null
onreadystatechange: ƒ state_Change()
length: 0
name: "state_Change"
prototype: {constructor: ƒ}
arguments: (...)
caller: (...)
[[FunctionLocation]]: 01Ajax.js:21
[[Prototype]]: ƒ ()
[[Scopes]]: Scopes[3]
ontimeout: null
readyState: 4
response: "{\"message\":[{\"cat_id\":1,\"cat_name\":\"大家电\",
responseText: "{\"message\":[{\"cat_id\":1,\"cat_name\":\"大家电\",
responseType: ""
responseURL: "https://api-hmugo-web.itheima.net/api/public/v1/categories"
responseXML: null
status: 200
statusText: "OK"
timeout: 0
upload: XMLHttpRequestUpload {onloadstart: null, onprogress: null, onabort: null, onerror: null, onload: null, …}
withCredentials: false
[[Prototype]]: XMLHttpRequest




有些请求头部由 XMLHttpRequest 自动设置而不是由这个方法设置，以符合 HTTP 协议。这包括如下和代理相关的头部：

Host
Connection
Keep-Alive
Accept-charset
Accept-Encoding
If-Modified-Since
If-None-Match
If-Range
Range


*/



var xmlhttp
function loadXMLDoc(url) {
  xmlhttp = null;
  if (window.XMLHttpRequest) {// code for all new browsers
    xmlhttp = new XMLHttpRequest();
  }
  // else if (window.ActiveXObject) {// code for IE5 and IE6
  //   xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  // }
  if (xmlhttp != null) {
    xmlhttp.onreadystatechange = state_Change;
    // xmlhttp.getAllResponseHeaders = getAllResponseHeaders
    xmlhttp.open("GET", url, true);
    xmlhttp.send(null);
  }
  else {
    alert("Your browser does not support XMLHTTP.");
  }
}

function state_Change() {
  if (xmlhttp.readyState === 4) {// 4 = "loaded"

    xmlhttp.getAllResponseHeaders(xmlhttp)


    if (xmlhttp.status === 200) {// 200 = OK
      console.log(111, xmlhttp);
      // ...our code here...
    }
    else {
      alert("Problem retrieving XML data");
    }
  }
}



function getAllResponseHeaders(data) {
  console.log("getAllResponseHeaders", data);
}

const AjaxView = () => {
  let url = 'https://api-hmugo-web.itheima.net/api/public/v1/categories'
  loadXMLDoc(url)
  return (
    <div>
      <h1>Ajax</h1>
    </div>
  )
}


export default AjaxView